<template>
  <el-dialog title="选择数据模型" :visible.sync="show" :close-on-click-modal="false" custom-class="nopadding">
    <el-input v-model="search" size="small" placeholder="输入关键字搜索">
      <el-button size="small" slot="append" icon="el-icon-search" @click="searchme"></el-button>
    </el-input>
    <div>
      <el-table :data="tableData" @row-click="selectme" border>
        <el-table-column label="" width="35" :resizable="true">
          <template slot-scope="scope">
            <el-radio v-model="checked" name="myselect2" :label="scope.row.cubeId">&nbsp;</el-radio>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="cubeName" label="模型名称"></el-table-column>
        <el-table-column align="center" prop="desc" label="说明"></el-table-column>
        <el-table-column align="center" prop="dsetName" label="数据集"></el-table-column>
      </el-table>
      <el-pagination
        background
        hide-on-single-page
        layout="prev, pager, next"
        :total="total">
      </el-pagination>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button size="small" type="primary" @click="save()">确 定</el-button>
      <el-button size="small" @click="show = false">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import request from "@/utils/request"
export default {
  data() {
    return {
      show: false,
      checked: null,
      tableData: [],
      search: null,
      total: 0,
      page: 1,
      rows: 10,
    }
  },
  props: {
    callback: {
      type: Function,   //点击选择立方体后的回调函数
      required: true
    }
  },
  mounted() {
  },
  computed: {},
  methods: {
    select() {
      this.show = true;
      this.search = null;
      this.loadData();
    },
    save() {
      let chk = this.checked;
      if (!chk) {
        this.$notify.error({title: '未勾选数据', offset: 50});
        return;
      }

      this.callback(chk);

      this.show = false;
    },
    selectme: function (a, b) {
      this.checked = a.cubeId;
    },
    searchme() {
      this.loadData();
    },
    loadData() {
      request({
        url: "/bi/model/pageCube",
        method: "POST",
        params: {rows: this.rows, page: this.page, key: this.search},
      }).then(resp=>{
        this.total = resp.total;
        this.tableData = resp.rows.map(m => {
          return {
            cubeId: m.cubeId,
            cubeName: m.cubeName,
            desc: m.desc,
            dsetName: m.dsetName
          }
        });
      });
    }
  },
  watch: {}
}
</script>

<style lang="css">
.nopadding .el-dialog__body {
  padding: 5px;
}
</style>
